import React from 'react';
import Chart from 'echarts-for-react';
import { Carousel } from 'antd';
import request from '../../../utils/request';

let data = {
    dataValue: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
    dataValue1: [7.0, 4.9, 43.0, 23.2, 25.6, 6.7, 135.6, 2.2, 32.6, 2.0, 6.4, 3],
    dataValue2: [9.0, 4.9, 7.0, 23.2, 2.6, 76.7, 135.6, 162.2, 32.6, 20.0, 4, 3.3],
    time: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
}

class MyLineR extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: 1,
            dataList: '',
        };
    }
    componentDidMount() {
        request({
            url: `/web/redstar/cockpitport/waterTreatmentMonitoring`,
            method: 'POST',
            data: { indexArr: ['水温', '易沉固体', '悬浮物', '动植物油', 'PH', 'BOD5', 'COD', '氨氮', '总磷', '总汞', '总镉', '总铬', '六价铬', '总砷', '总铅', '总锌'] }

        }).then(data => {
            if (data.rc === 0) {
                this.setState({
                    dataList: data.ret
                })
            }
        })


    }

   //第一组
   setOption = () => {
    let myOption;
    let data = this.state.dataList
    // console.log(data)
    myOption = {
        textStyle: { color: '#FFF' },
        color: ['#70D7FF'],
        tooltip: {
            trigger: 'axis',
            confine:true
            // axisPointer: {
            //     type: 'cross'
            // }
        },
        legend: {

            data: ['水温',],
            textStyle: {
                color: "#fff"
            }
        },
        grid: {
            top: '40%',
            left: '6%',
            right: '8%',
            bottom: '0%',
            containLabel: true
        },
        xAxis: [
            {
                axisLine: { lineStyle: { color: '#70D7FF' } },
                type: 'category',
                boundaryGap: false,
                axisTick: {
                    alignWithLabel: true
                },
                data: data ? data[data.length - 2].data : []
            }
        ],
        yAxis: [

            {
                axisLine: { lineStyle: { color: '#70D7FF' } },
                splitLine: { show: false },
                type: 'value',
                name: data ? data[0].unit : "",
                position: 'left',
            }

        ],
        series: [
            {
                name: data ? data[0].name : "",
                type: 'line',
                showSymbol: false,
                itemStyle: {
                    shadowColor: '#fff',
                    shadowBlur: 11
                },
                areaStyle: {
                    opacity: 0.4
                },
                data: data ? data[0].data : []
            }
        ]
    };
    return myOption;
};

//第二组
setOption2 = () => {
    let myOption;
    let data = this.state.dataList
    // console.log(data)
    myOption = {
        textStyle: { color: '#FFF' },
        color: [ 'orange',],
        tooltip: {
            trigger: 'axis',
            confine:true
            // axisPointer: {
            //     type: 'cross'
            // }
        },
        legend: {

            data: ['易沉固体'],
            textStyle: {
                color: "#fff"
            }
        },
        grid: {
            top: '40%',
            left: '2%',
            right: '2%',
            bottom: '0%',
            containLabel: true
        },
        xAxis: [
            {
                axisLine: { lineStyle: { color: '#70D7FF' } },
                type: 'category',
                boundaryGap: false,
                axisTick: {
                    alignWithLabel: true
                },
                data: data ? data[data.length - 2].data : []
            }
        ],
        yAxis: [

            {
                axisLine: { lineStyle: { color: '#70D7FF' } },
                splitLine: { show: false },
                type: 'value',
                name: data ? data[1].unit : "",
                position: 'left',
            }
          


        ],
        series: [
            {
                name: data ? data[1].name : "",
                type: 'line',
                showSymbol: false,
                yAxisIndex: 0,
                itemStyle: {
                    shadowColor: '#fff',
                    shadowBlur: 11
                },
                areaStyle: {
                    opacity: 0.4
                },
                data: data ? data[1].data : []
            },
           
        ]
    };
    return myOption;
};
 //第三组
 setOption3 = () => {
    let myOption;
    let data = this.state.dataList
    // console.log(data)
    myOption = {
        textStyle: { color: '#FFF' },
        color: ['green'],
        tooltip: {
            trigger: 'axis',
            confine:true
            // axisPointer: {
            //     type: 'cross'
            // }
        },
        legend: {

            data: ['悬浮物'],
            textStyle: {
                color: "#fff"
            }
        },
        grid: {
            top: '40%',
            left: '2%',
            right: '2%',
            bottom: '0%',
            containLabel: true
        },
        xAxis: [
            {
                axisLine: { lineStyle: { color: '#70D7FF' } },
                type: 'category',
                boundaryGap: false,
                axisTick: {
                    alignWithLabel: true
                },
                data: data ? data[data.length - 2].data : []
            }
        ],
        yAxis: [

            {
                axisLine: { lineStyle: { color: '#70D7FF' } },
                splitLine: { show: false },
                type: 'value',
                name: data ? data[2].unit : "",
                position: 'left',
            },
           


        ],
        series: [
            {
                name: data ? data[2].name : "",
                type: 'line',
                showSymbol: false,
               
                itemStyle: {
                    shadowColor: '#fff',
                    shadowBlur: 11
                },
                areaStyle: {
                    opacity: 0.4
                },
                data: data ? data[2].data : []
            },
            
        ]
    };
    return myOption;
};
 //第四组
 setOption4 = () => {
    let myOption;
    let data = this.state.dataList
    // console.log(data)
    myOption = {
        textStyle: { color: '#FFF' },
        color: ['#70D7FF'],
        tooltip: {
            trigger: 'axis',
            confine:true
            // axisPointer: {
            //     type: 'cross'
            // }
        },
        legend: {

            data: ['动植物油'],
            textStyle: {
                color: "#fff"
            }
        },
        grid: {
            top: '40%',
            left: '2%',
            right: '2%',
            bottom: '0%',
            containLabel: true
        },
        xAxis: [
            {
                axisLine: { lineStyle: { color: '#70D7FF' } },
                type: 'category',
                boundaryGap: false,
                axisTick: {
                    alignWithLabel: true
                },
                data: data ? data[data.length - 2].data : []
            }
        ],
        yAxis: [

            {
                axisLine: { lineStyle: { color: '#70D7FF' } },
                splitLine: { show: false },
                type: 'value',
                name: data ? data[3].unit : "",
                position: 'left',
            },
         
           


        ],
        series: [
            {
                name: data ? data[3].name : "",
                type: 'line',
                showSymbol: false,
              
                itemStyle: {
                    shadowColor: '#fff',
                    shadowBlur: 11
                },
                areaStyle: {
                    opacity: 0.4
                },
                data: data ? data[3].data : []
            },
            
        ]
    };
    return myOption;
};


//第五组
setOption5 = () => {
    let myOption;
    let data = this.state.dataList
    // console.log(data)
    myOption = {
        textStyle: { color: '#FFF' },
        color: ['#70D7FF'],
        tooltip: {
            trigger: 'axis',
            confine:true
            // axisPointer: {
            //     type: 'cross'
            // }
        },
        legend: {

            data: ['pH',],
            textStyle: {
                color: "#fff"
            }
        },
        grid: {
            top: '40%',
            left: '6%',
            right: '8%',
            bottom: '0%',
            containLabel: true
        },
        xAxis: [
            {
                axisLine: { lineStyle: { color: '#70D7FF' } },
                type: 'category',
                boundaryGap: false,
                axisTick: {
                    alignWithLabel: true
                },
                data: data ? data[data.length - 2].data : []
            }
        ],
        yAxis: [

            {
                axisLine: { lineStyle: { color: '#70D7FF' } },
                splitLine: { show: false },
                type: 'value',
                name: data ? data[4].unit : "",
                position: 'left',
            }

        ],
        series: [
            {
                name: data ? data[4].name : "",
                type: 'line',
                showSymbol: false,
                itemStyle: {
                    shadowColor: '#fff',
                    shadowBlur: 11
                },
                areaStyle: {
                    opacity: 0.4
                },
                data: data ? data[4].data : []
            }
        ]
    };
    return myOption;
};

//第六组
setOption6 = () => {
    let myOption;
    let data = this.state.dataList
    // console.log(data)
    myOption = {
        textStyle: { color: '#FFF' },
        color: [ 'orange',],
        tooltip: {
            trigger: 'axis',
            confine:true
            // axisPointer: {
            //     type: 'cross'
            // }
        },
        legend: {

            data: ['BOD5'],
            textStyle: {
                color: "#fff"
            }
        },
        grid: {
            top: '40%',
            left: '2%',
            right: '2%',
            bottom: '0%',
            containLabel: true
        },
        xAxis: [
            {
                axisLine: { lineStyle: { color: '#70D7FF' } },
                type: 'category',
                boundaryGap: false,
                axisTick: {
                    alignWithLabel: true
                },
                data: data ? data[data.length - 2].data : []
            }
        ],
        yAxis: [

            {
                axisLine: { lineStyle: { color: '#70D7FF' } },
                splitLine: { show: false },
                type: 'value',
                name: data ? data[5].unit : "",
                position: 'left',
            }
          


        ],
        series: [
            {
                name: data ? data[5].name : "",
                type: 'line',
                showSymbol: false,
                yAxisIndex: 0,
                itemStyle: {
                    shadowColor: '#fff',
                    shadowBlur: 11
                },
                areaStyle: {
                    opacity: 0.4
                },
                data: data ? data[5].data : []
            },
           
        ]
    };
    return myOption;
};
 //第七组
 setOption7 = () => {
    let myOption;
    let data = this.state.dataList
    // console.log(data)
    myOption = {
        textStyle: { color: '#FFF' },
        color: ['green'],
        tooltip: {
            trigger: 'axis',
            confine:true
            // axisPointer: {
            //     type: 'cross'
            // }
        },
        legend: {

            data: ['COD'],
            textStyle: {
                color: "#fff"
            }
        },
        grid: {
            top: '40%',
            left: '2%',
            right: '2%',
            bottom: '0%',
            containLabel: true
        },
        xAxis: [
            {
                axisLine: { lineStyle: { color: '#70D7FF' } },
                type: 'category',
                boundaryGap: false,
                axisTick: {
                    alignWithLabel: true
                },
                data: data ? data[data.length - 2].data : []
            }
        ],
        yAxis: [

            {
                axisLine: { lineStyle: { color: '#70D7FF' } },
                splitLine: { show: false },
                type: 'value',
                name: data ? data[6].unit : "",
                position: 'left',
            },
           


        ],
        series: [
            {
                name: data ? data[6].name : "",
                type: 'line',
                showSymbol: false,
               
                itemStyle: {
                    shadowColor: '#fff',
                    shadowBlur: 11
                },
                areaStyle: {
                    opacity: 0.4
                },
                data: data ? data[6].data : []
            },
            
        ]
    };
    return myOption;
};
 //第八组
 setOption8 = () => {
    let myOption;
    let data = this.state.dataList
    // console.log(data)
    myOption = {
        textStyle: { color: '#FFF' },
        color: ['#70D7FF'],
        tooltip: {
            trigger: 'axis',
            confine:true
            // axisPointer: {
            //     type: 'cross'
            // }
        },
        legend: {

            data: ['氨氮'],
            textStyle: {
                color: "#fff"
            }
        },
        grid: {
            top: '40%',
            left: '2%',
            right: '2%',
            bottom: '0%',
            containLabel: true
        },
        xAxis: [
            {
                axisLine: { lineStyle: { color: '#70D7FF' } },
                type: 'category',
                boundaryGap: false,
                axisTick: {
                    alignWithLabel: true
                },
                data: data ? data[data.length - 2].data : []
            }
        ],
        yAxis: [

            {
                axisLine: { lineStyle: { color: '#70D7FF' } },
                splitLine: { show: false },
                type: 'value',
                name: data ? data[7].unit : "",
                position: 'left',
            },
         
           


        ],
        series: [
            {
                name: data ? data[7].name : "",
                type: 'line',
                showSymbol: false,
              
                itemStyle: {
                    shadowColor: '#fff',
                    shadowBlur: 11
                },
                areaStyle: {
                    opacity: 0.4
                },
                data: data ? data[7].data : []
            },
            
        ]
    };
    return myOption;
};



 //第九组
 setOption9 = () => {
    let myOption;
    let data = this.state.dataList
    // console.log(data)
    myOption = {
        textStyle: { color: '#FFF' },
        color: ['#70D7FF'],
        tooltip: {
            trigger: 'axis',
            confine:true
            // axisPointer: {
            //     type: 'cross'
            // }
        },
        legend: {

            data: ['总磷'],
            textStyle: {
                color: "#fff"
            }
        },
        grid: {
            top: '40%',
            left: '6%',
            right: '8%',
            bottom: '0%',
            containLabel: true
        },
        xAxis: [
            {
                axisLine: { lineStyle: { color: '#70D7FF' } },
                type: 'category',
                boundaryGap: false,
                axisTick: {
                    alignWithLabel: true
                },
                data: data ? data[data.length - 2].data : []
            }
        ],
        yAxis: [

            {
                axisLine: { lineStyle: { color: '#70D7FF' } },
                splitLine: { show: false },
                type: 'value',
                name: data ? data[8].unit : "",
                position: 'left',
            }

        ],
        series: [
            {
                name: data ? data[8].name : "",
                type: 'line',
                showSymbol: false,
                itemStyle: {
                    shadowColor: '#fff',
                    shadowBlur: 11
                },
                areaStyle: {
                    opacity: 0.4
                },
                data: data ? data[8].data : []
            }
        ]
    };
    return myOption;
};

//第十组
setOption10 = () => {
    let myOption;
    let data = this.state.dataList
    // console.log(data)
    myOption = {
        textStyle: { color: '#FFF' },
        color: [ 'orange',],
        tooltip: {
            trigger: 'axis',
            confine:true
            // axisPointer: {
            //     type: 'cross'
            // }
        },
        legend: {

            data: ['总汞'],
            textStyle: {
                color: "#fff"
            }
        },
        grid: {
            top: '40%',
            left: '2%',
            right: '2%',
            bottom: '0%',
            containLabel: true
        },
        xAxis: [
            {
                axisLine: { lineStyle: { color: '#70D7FF' } },
                type: 'category',
                boundaryGap: false,
                axisTick: {
                    alignWithLabel: true
                },
                data: data ? data[data.length - 2].data : []
            }
        ],
        yAxis: [

            {
                axisLine: { lineStyle: { color: '#70D7FF' } },
                splitLine: { show: false },
                type: 'value',
                name: data ? data[9].unit : "",
                position: 'left',
            }
          


        ],
        series: [
            {
                name: data ? data[9].name : "",
                type: 'line',
                showSymbol: false,
                yAxisIndex: 0,
                itemStyle: {
                    shadowColor: '#fff',
                    shadowBlur: 11
                },
                areaStyle: {
                    opacity: 0.4
                },
                data: data ? data[9].data : []
            },
           
        ]
    };
    return myOption;
};
 //第十一组
 setOption11 = () => {
    let myOption;
    let data = this.state.dataList
    // console.log(data)
    myOption = {
        textStyle: { color: '#FFF' },
        color: ['green'],
        tooltip: {
            trigger: 'axis',
            confine:true
            // axisPointer: {
            //     type: 'cross'
            // }
        },
        legend: {

            data: ['总镉'],
            textStyle: {
                color: "#fff"
            }
        },
        grid: {
            top: '40%',
            left: '2%',
            right: '2%',
            bottom: '0%',
            containLabel: true
        },
        xAxis: [
            {
                axisLine: { lineStyle: { color: '#70D7FF' } },
                type: 'category',
                boundaryGap: false,
                axisTick: {
                    alignWithLabel: true
                },
                data: data ? data[data.length - 2].data : []
            }
        ],
        yAxis: [

            {
                axisLine: { lineStyle: { color: '#70D7FF' } },
                splitLine: { show: false },
                type: 'value',
                name: data ? data[10].unit : "",
                position: 'left',
            },
           


        ],
        series: [
            {
                name: data ? data[10].name : "",
                type: 'line',
                showSymbol: false,
               
                itemStyle: {
                    shadowColor: '#fff',
                    shadowBlur: 11
                },
                areaStyle: {
                    opacity: 0.4
                },
                data: data ? data[10].data : []
            },
            
        ]
    };
    return myOption;
};
 //第十二组
 setOption12 = () => {
    let myOption;
    let data = this.state.dataList
    // console.log(data)
    myOption = {
        textStyle: { color: '#FFF' },
        color: ['#70D7FF'],
        tooltip: {
            trigger: 'axis',
            confine:true
            // axisPointer: {
            //     type: 'cross'
            // }
        },
        legend: {

            data: ['总铬'],
            textStyle: {
                color: "#fff"
            }
        },
        grid: {
            top: '40%',
            left: '2%',
            right: '2%',
            bottom: '0%',
            containLabel: true
        },
        xAxis: [
            {
                axisLine: { lineStyle: { color: '#70D7FF' } },
                type: 'category',
                boundaryGap: false,
                axisTick: {
                    alignWithLabel: true
                },
                data: data ? data[data.length - 2].data : []
            }
        ],
        yAxis: [

            {
                axisLine: { lineStyle: { color: '#70D7FF' } },
                splitLine: { show: false },
                type: 'value',
                name: data ? data[11].unit : "",
                position: 'left',
            },
         
           


        ],
        series: [
            {
                name: data ? data[11].name : "",
                type: 'line',
                showSymbol: false,
              
                itemStyle: {
                    shadowColor: '#fff',
                    shadowBlur: 11
                },
                areaStyle: {
                    opacity: 0.4
                },
                data: data ? data[11].data : []
            },
            
        ]
    };
    return myOption;
};




 //第十三组
 setOption13 = () => {
    let myOption;
    let data = this.state.dataList
    // console.log(data)
    myOption = {
        textStyle: { color: '#FFF' },
        color: ['#70D7FF'],
        tooltip: {
            trigger: 'axis',
            confine:true
            // axisPointer: {
            //     type: 'cross'
            // }
        },
        legend: {

            data: ['六价铬'],
            textStyle: {
                color: "#fff"
            }
        },
        grid: {
            top: '40%',
            left: '6%',
            right: '8%',
            bottom: '0%',
            containLabel: true
        },
        xAxis: [
            {
                axisLine: { lineStyle: { color: '#70D7FF' } },
                type: 'category',
                boundaryGap: false,
                axisTick: {
                    alignWithLabel: true
                },
                data: data ? data[data.length - 2].data : []
            }
        ],
        yAxis: [

            {
                axisLine: { lineStyle: { color: '#70D7FF' } },
                splitLine: { show: false },
                type: 'value',
                name: data ? data[12].unit : "",
                position: 'left',
            }

        ],
        series: [
            {
                name: data ? data[12].name : "",
                type: 'line',
                showSymbol: false,
                itemStyle: {
                    shadowColor: '#fff',
                    shadowBlur: 11
                },
                areaStyle: {
                    opacity: 0.4
                },
                data: data ? data[12].data : []
            }
        ]
    };
    return myOption;
};

//第十四组
setOption14 = () => {
    let myOption;
    let data = this.state.dataList
    // console.log(data)
    myOption = {
        textStyle: { color: '#FFF' },
        color: [ 'orange',],
        tooltip: {
            trigger: 'axis',
            confine:true
            // axisPointer: {
            //     type: 'cross'
            // }
        },
        legend: {

            data: ['总砷'],
            textStyle: {
                color: "#fff"
            }
        },
        grid: {
            top: '40%',
            left: '2%',
            right: '2%',
            bottom: '0%',
            containLabel: true
        },
        xAxis: [
            {
                axisLine: { lineStyle: { color: '#70D7FF' } },
                type: 'category',
                boundaryGap: false,
                axisTick: {
                    alignWithLabel: true
                },
                data: data ? data[data.length - 2].data : []
            }
        ],
        yAxis: [

            {
                axisLine: { lineStyle: { color: '#70D7FF' } },
                splitLine: { show: false },
                type: 'value',
                name: data ? data[13].unit : "",
                position: 'left',
            }
          


        ],
        series: [
            {
                name: data ? data[13].name : "",
                type: 'line',
                showSymbol: false,
                yAxisIndex: 0,
                itemStyle: {
                    shadowColor: '#fff',
                    shadowBlur: 11
                },
                areaStyle: {
                    opacity: 0.4
                },
                data: data ? data[13].data : []
            },
           
        ]
    };
    return myOption;
};
 //第十五组
 setOption15 = () => {
    let myOption;
    let data = this.state.dataList
    // console.log(data)
    myOption = {
        textStyle: { color: '#FFF' },
        color: ['green'],
        tooltip: {
            trigger: 'axis',
            confine:true
            // axisPointer: {
            //     type: 'cross'
            // }
        },
        legend: {

            data: ['总铅'],
            textStyle: {
                color: "#fff"
            }
        },
        grid: {
            top: '40%',
            left: '2%',
            right: '2%',
            bottom: '0%',
            containLabel: true
        },
        xAxis: [
            {
                axisLine: { lineStyle: { color: '#70D7FF' } },
                type: 'category',
                boundaryGap: false,
                axisTick: {
                    alignWithLabel: true
                },
                data: data ? data[data.length - 2].data : []
            }
        ],
        yAxis: [

            {
                axisLine: { lineStyle: { color: '#70D7FF' } },
                splitLine: { show: false },
                type: 'value',
                name: data ? data[14].unit : "",
                position: 'left',
            },
           


        ],
        series: [
            {
                name: data ? data[14].name : "",
                type: 'line',
                showSymbol: false,
               
                itemStyle: {
                    shadowColor: '#fff',
                    shadowBlur: 11
                },
                areaStyle: {
                    opacity: 0.4
                },
                data: data ? data[14].data : []
            },
            
        ]
    };
    return myOption;
};
 //第十六组
 setOption16 = () => {
    let myOption;
    let data = this.state.dataList
    // console.log(data)
    myOption = {
        textStyle: { color: '#FFF' },
        color: ['#70D7FF'],
        tooltip: {
            trigger: 'axis',
            confine:true
            // axisPointer: {
            //     type: 'cross'
            // }
        },
        legend: {

            data: ['总锌'],
            textStyle: {
                color: "#fff"
            }
        },
        grid: {
            top: '40%',
            left: '2%',
            right: '2%',
            bottom: '0%',
            containLabel: true
        },
        xAxis: [
            {
                axisLine: { lineStyle: { color: '#70D7FF' } },
                type: 'category',
                boundaryGap: false,
                axisTick: {
                    alignWithLabel: true
                },
                data: data ? data[data.length - 2].data : []
            }
        ],
        yAxis: [

            {
                axisLine: { lineStyle: { color: '#70D7FF' } },
                splitLine: { show: false },
                type: 'value',
                name: data ? data[15].unit : "",
                position: 'left',
            },
         
           


        ],
        series: [
            {
                name: data ? data[15].name : "",
                type: 'line',
                showSymbol: false,
              
                itemStyle: {
                    shadowColor: '#fff',
                    shadowBlur: 11
                },
                areaStyle: {
                    opacity: 0.4
                },
                data: data ? data[15].data : []
            },
            
        ]
    };
    return myOption;
};
    render() {
        return (
            <Carousel autoplay>
                <div style={{ height: "80%" }}>
                    <Chart
                        option={this.setOption()}
                        notMerge
                        lazyUpdate
                        style={{ height: "60vh" }}
                    />
                </div>
                <div style={{ height: "80%" }}>
                    <Chart
                        option={this.setOption2()}
                        notMerge
                        lazyUpdate
                        style={{ height: "60vh" }}
                    />
                </div>
                <div style={{ height: "80%" }}>
                    <Chart
                        option={this.setOption3()}
                        notMerge
                        lazyUpdate
                        style={{ height: "60vh" }}
                    />
                </div>
                <div style={{ height: "80%" }}>
                    <Chart
                        option={this.setOption4()}
                        notMerge
                        lazyUpdate
                        style={{ height: "60vh" }}
                    />
                </div>

                <div style={{ height: "80%" }}>
                    <Chart
                        option={this.setOption5()}
                        notMerge
                        lazyUpdate
                        style={{ height: "60vh" }}
                    />
                </div>
                {/* <div style={{ height: "80%" }}>
                    <Chart
                        option={this.setOption6()}
                        notMerge
                        lazyUpdate
                        style={{ height: "60vh" }}
                    />
                </div> */}
                <div style={{ height: "80%" }}>
                    <Chart
                        option={this.setOption7()}
                        notMerge
                        lazyUpdate
                        style={{ height: "60vh" }}
                    />
                </div>
                <div style={{ height: "80%" }}>
                    <Chart
                        option={this.setOption8()}
                        notMerge
                        lazyUpdate
                        style={{ height: "60vh" }}
                    />
                </div>

                <div style={{ height: "80%" }}>
                    <Chart
                        option={this.setOption9()}
                        notMerge
                        lazyUpdate
                        style={{ height: "60vh" }}
                    />
                </div>
                <div style={{ height: "80%" }}>
                    <Chart
                        option={this.setOption10()}
                        notMerge
                        lazyUpdate
                        style={{ height: "60vh" }}
                    />
                </div>
                <div style={{ height: "80%" }}>
                    <Chart
                        option={this.setOption11()}
                        notMerge
                        lazyUpdate
                        style={{ height: "60vh" }}
                    />
                </div>
                <div style={{ height: "80%" }}>
                    <Chart
                        option={this.setOption12()}
                        notMerge
                        lazyUpdate
                        style={{ height: "60vh" }}
                    />
                </div>

                <div style={{ height: "80%" }}>
                    <Chart
                        option={this.setOption13()}
                        notMerge
                        lazyUpdate
                        style={{ height: "60vh" }}
                    />
                </div>
                <div style={{ height: "80%" }}>
                    <Chart
                        option={this.setOption14()}
                        notMerge
                        lazyUpdate
                        style={{ height: "60vh" }}
                    />
                </div>
                <div style={{ height: "80%" }}>
                    <Chart
                        option={this.setOption15()}
                        notMerge
                        lazyUpdate
                        style={{ height: "60vh" }}
                    />
                </div>
                <div style={{ height: "80%" }}>
                    <Chart
                        option={this.setOption16()}
                        notMerge
                        lazyUpdate
                        style={{ height: "60vh" }}
                    />
                </div>
            </Carousel>



        )
    }
}
export default MyLineR;
